<template>
  <!-- prettier-ignore -->
  <el-dialog :visible.sync="dialog.数据统计.visible" :width="'1440px'" @open="ajaxData">
    <div slot="title" class="align-cm">
      <b class="fc-gray10">数据统计</b>
    </div>
    <!-- {{ theConditions }} -->
    <div class="pl20 pr20">
      <el-form ref="form" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item>
              <template slot="label">资源渠道</template>
              <el-select size="small" placeholder="请选择" multiple collapse-tags filterable
                v-model="parameter.resourceChannels">
                <el-option v-for="item in conditional.resourceChannels.options"
                  :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <template slot="label">进线时间</template>
              <el-date-picker style="width: 100%" size="small" v-model="parameter.releaseTime"
                type="datetimerange" range-separator="-" start-placeholder="开始" end-placeholder="结束">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4" v-if="$store.getters['userInfo/getIsLoading'].departmen">
            <el-form-item>
              <template slot="label">部门</template>
              <el-select size="small" placeholder="请选择" v-model="parameter.department" @change="reAjaxBelongToSales($event)">
                <el-option v-for="item in conditional.department.options"
                  :key="item.value" :label="item.label" :value="item.value">
                  {{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" v-if="$store.getters['userInfo/getIsLoading'].sales">
            <el-form-item>
              <template slot="label">销售</template>
              <el-select size="small" placeholder="请选择" multiple collapse-tags filterable
                v-model="parameter.belongToSales">
                <el-option v-for="item in conditional.belongToSales.options.slice(1)"
                  :key="item.key" :label="item.label" :value="item.value">
                  {{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <template slot="label">离职状态</template>
              <el-select size="small" placeholder="请选择" v-model="parameter.离职状态">
                <el-option v-for="item in conditional.flagDeparture.options"
                  :key="item.value" :label="item.label" :value="item.value">
                  {{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <template slot="label">重复资源</template>
              <el-select size="small" placeholder="请选择" v-model="parameter.重复资源">
                <el-option v-for="item in conditional.repeatResources.options"
                  :key="item.value" :label="item.label" :value="item.value" >
                  {{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <template slot="label">全局重复</template>
              <el-select size="small" placeholder="请选择" v-model="parameter.全局重复">
                <el-option v-for="item in conditional.repeatResources.options"
                  :key="item.value" :label="item.label" :value="item.value" >
                  {{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="pl20 pr20">
      <el-button size="small" type="primary" @click="search()" >
        <i class="fa fa-fw iconfont icon-search"></i>查询
      </el-button>
      <el-button size="small" type="warning" @click="reset()">
        <i class="fa fa-fw iconfont icon-reset"></i>重置
      </el-button>
      <el-button size="small" type="info" plain @click="refresh()">
        <i class="fa fa-fw iconfont icon-refresh"></i>刷新
      </el-button>
      <el-button-group class="ml20">
        <el-button size="mini" v-for="(item, key) in dataTimeRangePicker" :key="key"
          @click="quickSetupTime(item.value)" >
          {{ item.label }}
        </el-button>
      </el-button-group>
    </div>

    <el-table class="myStyle" size="mini" style="width: 100%" v-loading="loading"
      header-row-class-name="info-row" highlight-current-row
      :data="tableData"  row-key="index" default-expand-all
      :tree="true" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <!-- -->
      <el-table-column label="序号" prop="index" type="index">
        <!-- <template slot-scope="scope">{{ scope.row.index }}</template> -->
      </el-table-column>
      <el-table-column label="组别" prop="deptName">
        <template slot-scope="scope">{{ scope.row.deptName }}</template>
      </el-table-column>
      <el-table-column label="姓名" prop="realName">
        <template slot-scope="scope">{{ scope.row.realName }}</template>
      </el-table-column>
      <el-table-column label="添加数">
        <template slot-scope="scope">{{ scope.row.添加数 }}</template>
      </el-table-column>
      <!-- <el-table-column label="总关注数">
        <template slot-scope="scope">{{ scope.row.总关注数 }}</template>
      </el-table-column>
      <el-table-column label="总关注率">
        <template slot-scope="scope">{{ scope.row.总关注率 }}</template>
      </el-table-column>
      <el-table-column label="24小时之内关注数">
        <template slot-scope="scope">{{ scope.row.小时24之内关注数 }}</template>
      </el-table-column>
      <el-table-column label="24小时之内关注率">
        <template slot-scope="scope">{{ scope.row.小时24之内关注率 }}</template>
      </el-table-column>
      <el-table-column label="24小时之外关注数">
        <template slot-scope="scope">{{ scope.row.小时24之外关注数 }}</template>
      </el-table-column>
      <el-table-column label="24小时之外关注率">
        <template slot-scope="scope">{{ scope.row.小时24之外关注率 }}</template>
      </el-table-column> -->
    </el-table>
    
    <!-- <el-pagination class="align-rm"
      @current-change="handleCurrentChange" :current-page.sync="page.current"
      :page-sizes="[10, 20]" :page-size.sync="page.size" :total="page.total"
      layout="total, prev, pager, next, sizes">
    </el-pagination> -->
  </el-dialog>
</template>

<script>
import { DTRange } from '@/components/def-option.js';
import _ from 'lodash';

import { mapState, mapMutations } from 'vuex';
export default {
  name: 'dataStatistics',
  data() {
    return {
      isDev: process.env.NODE_ENV == 'development',
      dataTimeRangePicker: [
        { label: '今日', value: DTRange.today },
        { label: '昨日', value: DTRange.yesterday },
        { label: '近7日', value: DTRange.nearly7D },
        { label: '本月', value: DTRange.thisMonth },
        { label: '上月', value: DTRange.nearly1M },
      ],
      parameter: {
        resourceChannels: [], //资源渠道
        releaseTime: [], //发布时间
        department: '',
        belongToSales: [],
        离职状态: '',
        重复资源: '',
        全局重复: '',
      },
      tableData: [],
      loading: false,
      FlagErr: 0,
      page: {
        current: 1,
        size: 10,
        total: 40,
      },
    };
  },
  computed: {
    ...mapState(['dialog', 'conditional']),
    theServicePage: function() {
      return {
        start: this.page.current,
        length: this.page.size,
      };
    },
    theConditions: function() {
      let p = this.parameter;
      return {
        nickName: _.get(p, 'nickname', ''),
        isAttentionWeChatWorkbench: _.get(p, 'focusOn', ''),
        isBubb: _.get(p, 'isBubb', ''),
        isRepetition: _.get(p, '重复资源', ''),
        isGlobalPhonenumberRep: _.get(p, '全局重复', ''),
        deleteStatus: _.get(p, 'flagDelete', ''),
        eS_Company_Id: _.get(p, 'workbench', []).join(','),
        jxBeginTime: _.get(p, 'releaseTime[0]', ''),
        jxEndTime: _.get(p, 'releaseTime[1]', ''),
        deleteBeginTime: _.get(p, 'deleteBeginTime[0]', ''),
        deleteEndTime: _.get(p, 'deleteBeginTime[1]', ''),
        tagid: _.get(p, 'theLabel', []).join(','),
        zyQd: _.get(p, 'resourceChannels', []).join(','),
        deptId: _.get(p, 'department', ''),
        saleMan: _.get(p, 'belongToSales', []).join(','),
      };
    },
  },
  methods: {
    quickSetupTime(val) {
      this.parameter.releaseTime = val;
      this.ajaxData(true);
    },
    search() {
      this.ajaxData(true);
    },
    reset() {
      this.parameter = this.$options.data().parameter;
      this.ajaxData(true);
    },
    refresh() {
      this.ajaxData(false);
    },
    formatData(sData) {
      this.tableData.splice(0, this.tableData.length);
      if (sData.length == 0) {
        return;
      }
      let n1 = sData.map(v => {
        return {
          index: v.number,
          deptName: v.deptName,
          realName: v.realName,
          添加数: v.allInputNumber,
          总关注数: v.repeatAddNumber,
          总关注率: v.repetitionRate,
          小时24之内关注数: v.withinTwHours,
          小时24之内关注率: v.withinTwHoursRate,
          小时24之外关注数: v.withoutTwHours,
          小时24之外关注率: v.withoutTwHoursRate,
        };
      });
      let n2 = n1.reduceRight((t, v, i, a) => {
        if (['累计', '合计'].includes(v.deptName)) {
          t.push(
            Object.assign({}, v, {
              // hasChildren: v.deptName != "合计",
              children: v.deptName == '合计' ? [] : null,
            }),
          );
        } else {
          t[t.length - 1].realName = v.deptName;
          t[t.length - 1].children.push(Object.assign({}, v));
        }
        return t;
      }, []);

      n2.reverse().forEach(v => {
        this.tableData.push(v);
      });
    },
    ajaxData(isToPage1) {
      if (isToPage1) {
        this.page.current = 1;
      }
      let arg = Object.assign(
        {},
        this.$store.getters['userInfo/getEmployee'],
        this.theConditions,
      );
      this.loading = true;

      this.$api
        .getScrmCompanyStatistics({}, arg)
        .then(res => {
          // console.log(res);return;

          if (res.code == 200) {
            return Promise.resolve(res.data.data);
          } else {
            return Promise.reject(res);
          }
        })
        .then(res => {
          if (res.length >= 0) {
            this.formatData(res);
          }
        })
        .catch(err => {
          console.error(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    reAjaxBelongToSales: function(event) {
      this.$store.dispatch('conditional/getBelongToSales', {
        companyDepartmentCompany_Id: event,
      });
    },
    handleSizeChange(val) {
      // this.ajaxData(false);
    },
    handleCurrentChange(val) {
      // this.ajaxData(false);
    },
  },
};
</script>
<style scoped lang="less">
.el-form-item {
  margin-bottom: 16px;
}
</style>
